<template>
  <div style="padding:10px;">
    <div class="menu-item-group">
      <div class="menu-item-label">当前会话({{currentSessions.length}})</div>
      <el-menu
        :default-active="activeSessionId"
        @select="handleSelect"
        class="el-menu-vertical-demo"
      >
        <el-menu-item
          v-for="currentSession in currentSessions"
          :class="[activeSessionId == currentSession.sessionId+'' ?'active':'']"
          :key="currentSession.sessionId"
          :index="currentSession.sessionId+''"
        >
          <div class="session-menu-style" slot="title">
            <el-avatar :size="40" :src="imageUrl"></el-avatar>
            <div class="menu-middle-group">
              <div class="session-name-style">{{currentSession.visiterName}}</div>
              <div class="session-msg-style">{{currentSession.latestMessageContent}}</div>
            </div>
            <div class="menu-time-style">{{currentSession.latestMessageTime}}</div>
          </div>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="session-item-group">
      <SessionItem
        :sessionId="activeSessionId"
        :currentSession="getCurrentSession"
        @removeSession="handleRemoveSession"
      ></SessionItem>
    </div>
  </div>
</template>

<script>
import SessionItem from "@/components/items/SessionItem";
export default {
  name: "Session",
  components: {
    SessionItem
  },
  props: {},
  data() {
    return {
      activeSessionId: null,
      currentSessions: []
    };
  },
  watch: {},
  computed: {
    getCustomerServiceId() {
      return this.$store.state.profile.customerServiceId;
    },
    getCurrentSession() {
      return this.currentSessions.find(item => {
        return item.sessionId + "" == this.activeSessionId;
      });
    },
    imageUrl() {
      return this.$store.state.imageUrl;
    }
  },
  methods: {
    handleSelect(index, indexPath) {
      this.activeSessionId = index;
    },
    getSessionList() {
      const ws = new WebSocket(
        `ws://localhost:8080/session/${this.getCustomerServiceId}`
      );
      ws.onmessage = event => {
        this.currentSessions = JSON.parse(event.data).data;
        this.activeSessionId = this.currentSessions[0].sessionId + "";
      };
    },
    handleRemoveSession(sessionId) {
      this.currentSessions.forEach((item, index, arr) => {
        if (item.sessionId == sessionId) {
          this.currentSessions.splice(index, 1);
        }
      });
    }
  },
  created() {
    this.getSessionList();
  },
  mounted() {}
};
</script>

<style scoped>
.el-menu-vertical-demo {
  width: 300px;
  height: auto;
  /* border-radius: 5px; */
}
.menu-item-label {
  width: 280px;
  background-color: #fff;
  height: 60px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  /* color: #acacac; */
  padding-left: 20px;
  line-height: 60px;
  position: fixed;
  top: 75px;
  left: 75px;
  border-bottom: 1px solid #e6f1ff;
  z-index: 100;
}
.menu-item-group {
  position: fixed;
  left: 75px;
  top: 75px;
  height: 80vh;
  overflow: auto;
  padding-top: 61px;
  background-color: #fff;
}
.session-item-group {
  margin-left: 320px;
  margin-top: 5px;
}
.active {
  background-color: #e6f1ff !important;
  /* color: #0166ed; */
  border-right: 4px solid #006eff;
}
.session-menu-style {
  height: 65px !important;
  width: 280px;
  display: flex;
  align-items: center;
  position: relative;
}
.menu-middle-group {
  line-height: 1em;
}
.session-name-style {
  padding: 10px;
  padding-top: 0;
  width: 100px; /*宽度*/
  text-overflow: ellipsis; /*文字以省略号的方式隐藏*/
  white-space: nowrap; /*禁止文字内容折行*/
  overflow: hidden; /*超出部分溢出隐藏*/
}
.session-msg-style {
  font-size: 12px;
  color: #999999;
  padding-left: 10px;
  width: 200px; /*宽度*/
  text-overflow: ellipsis; /*文字以省略号的方式隐藏*/
  white-space: nowrap; /*禁止文字内容折行*/
  overflow: hidden; /*超出部分溢出隐藏*/
}
.menu-time-style {
  color: #d1d3d6;
  font-size: 12px;
  position: absolute;
  right: 20px;
  top: -10px;
}
.el-menu-item,
.el-submenu__title {
  height: auto;
}
</style>